<template>
  <div class="com-admin-logs">
    <a-form :model="form" :label-width="80" layout="inline">
      <a-form-item label="查询条件">
        <a-input v-model="form.conditions" placeholder="请输入查询条件" style="width: 500px">
          <a-select slot="addonAfter" v-model="form.conditions" style="width: 110px">
            <a-select-option v-for="v in options" :key="v.key" :value="v.key">{{ v.title }}</a-select-option>
          </a-select>
        </a-input>
      </a-form-item>
      <a-form-item label="时间范围">
        <a-range-picker v-model="form.date" @change="dateChange" style="width: 300px"/>
      </a-form-item>
      <a-form-item label="查询顺序">
        <a-switch v-model="form.reverse" @change="reverseChange" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="searchBtnClick">查询</a-button>
      </a-form-item>
    </a-form>
    <br />
    <w-table-view v-if="listData.total" :list-data="listData">
      <template v-slot="scope" class="cell">
        <div class="com-admin-logs-cell">
          <a-icon type="delete" class="remove-btn w-pointer" @click="removeBtnClick(scope.item)"/>
          <slot :item="scope.item" />
        </div>
      </template>
    </w-table-view>
    <a-empty v-else/>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import WTableView from "@/components/global/tableview/customCell";

@Component({
  name: "ComAdminLogs",
  components: {
    WTableView,
  },
})
export default class ComAdminLogs extends Vue {
  @Prop({ type: String, default: "" }) removeUrl!: string;
  @Prop({ type: String, default: "" }) listUrl!: string;
  @Prop({ type: Array, default: () => [] }) options!: Array<any>;

  listData = {};
  form = {
    // 查询时间
    date: [],
    // 查询条件
    conditions: null,
    // 排列顺序
    reverse: true,
    // 选项KEY
    selKey: "",
  };

  @Watch("$route")
  routerChange() {
    this.reloadData();
  }

  mounted() {
    this.form.selKey = this.options[0].key;
    this.reloadData();
  }

  reloadData() {
    this.$wAxios
      .$get(this.listUrl, this.$route.query)
      .then((data) => {
        this.listData = data;
      })
      .catch(() => {});
  }

  reverseChange(reverse: any) {
    this.updateRouter({
      reverse,
    });
  }

  dateChange(dates: any) {
    const [start, end] = dates;
    const startDate = start ? new Date(start).toISOString() : undefined;
    const endDate = end ? new Date(end).toISOString() : undefined;
    this.updateRouter({
      startDate,
      endDate,
    });
  }

  searchBtnClick() {
    this.updateRouter({
      // 查询条件
      conditions: this.form.conditions,
      // 选项KEY
      selKey: this.form.selKey,
    });
  }

  removeBtnClick(item: any) {
    this.$wRemovePop(() => {
      return this.$axios.$delete(`${this.removeUrl}${item._id}`);
    }).then(() => {
      this.updateRouter();
    });
  }

  updateRouter(obj?: any) {
    const query: any = { ...this.$route.query };
    Object.assign(query, obj);
    query.tage = new Date().getTime();
    this.$router.push({ path: this.$route.path, query });
  }
}
</script>

<style scoped lang="less">
.com-admin-logs {
  .com-admin-logs-cell {
    position: relative;
    margin-bottom: 10px;
    background-color: #eee;
    padding: 5px 40px 5px 5px;
    border-radius: 5px;
    .remove-btn {
      position: absolute;
      right: 5px;
      font-size: 20px;
      top: 5px;
      color: #ccc;
    }
    .remove-btn:hover {
      color: #f05459;
    }
  }
}
</style>
